<template>
     <div v-if="!isLoggedIn" class="rail">
            <div class="rail-left">
                <router-link to="/">
                    <div class="gift"></div>
                    <p>新人登录，立即领取好礼</p>
                </router-link>
            </div>
            <div class="rail-right">
                <router-link to="/login">
                    <button>立即登录</button>
                </router-link>
            </div>
        </div>
        <div v-else>
          
        </div>
        </template>
<script>
export default {
    data() {
        return {
            isLoggedIn: false // 初始状态为未登录
        }
    },
    created(){
        // 赋值
        let token = localStorage.getItem("AUTO_TOKEN");
        // 为了减少报错。多加一个判断
        if(token){
            this.isLoggedIn = true; // 修改状态为已登录
        }

    },
    
}
</script>
<style scoped lang="less">
    
  .rail {
    width: 300px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    .rail-left {
      a {
        display: flex;
        // align-items: center;
        color: #fff;
        text-decoration: none;

        .gift {
          width: 20px;
          height: 20px;
          background-image: url(../assets/img/gift.png);
          background-size: cover;
        }

        p {
          text-align: center;
          font-size: 10px;
          margin-left: 8px;
          margin-top: 4px;
        }
      }
    }

    .rail-right {
      a {
        button {
          width: 60px;
          height: 20px;
          font-size: 10px;
          background-color: #d0021b;
          color: #fff;
          border: none;
          border-radius: 10px;
          margin-bottom: 2px;
        }
      }
    }
  }
</style>